<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="flexible" content="initial-dpr=1" />
    <title>Title</title>
    <script src="./js/jquery-2.1.0.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/layer-v3.0.3%202/layer/layer.js"></script>
    <script src="./js/video-js-6.2.5/video.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./js/video-js-6.2.5/video-js.css">
</head>
<body>

<script id="flexTemplate" type="text/html">
    {{each data}}
            <div class="flex_container_default">
                <div  {{if $value[0]}} class="hasValue" data-videoname="{{$value[0]}}" style="background-image: url('./images/{{$value[0]}}.png')"  {{/if}} > {{if $value[0]}} <div class="text">{{$value[0]}}</div>{{/if}} </div>
                <div {{if $value[1]}}  class="hasValue" data-videoname="{{$value[1]}}"  style="background-image: url('./images/{{$value[1]}}.png')"  {{/if}} > {{if $value[1]}}<div class="text">{{$value[1]}}</div>{{/if}} </div>
                <div  {{if $value[2]}}  class="hasValue" data-videoname="{{$value[2]}}"  style="background-image: url('./images/{{$value[2]}}.png')"  {{/if}} > {{if $value[2]}}<div class="text">{{$value[2]}}</div>{{/if}} </div>
                <div  {{if $value[3]}}  class="hasValue" data-videoname="{{$value[3]}}"  style="background-image: url('./images/{{$value[3]}}.png')"  {{/if}} > {{if $value[3]}}<div class="text">{{$value[3]}}</div>{{/if}} </div>
            </div>
    {{/each}}
</script>




<div class="container">
        <div class="group">
            <div></div>
        </div>
</div>


<script>




    $(document).ready(function(){

      var player

      $.get("/itemList").then(function(res){
        var html = template("flexTemplate",res)
        $(".group").html(html)
      })

      //register click event
      $(document).on("click",".hasValue",function (e) {
            var videoName = $(e.target).data('videoname');
             var  videoURL ="./videos/"+videoName+".mp4";
             //add mask
            $("body").append("<div class='mask'></div>")
            var videoString = '<video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="1200" height="675"  > <source id="sourceBox"  src="http://static.qiakr.com/movie/0060202.mp4" type="video/mp4"> <p class="vjs-no-js">不支持播放</p></video>'
           $("body").append(videoString)
        player= videojs('video1');
        player.addClass('center');
         player.pause()
//        player.src(videoURL)
        player.play()
      })
      $(document).on("click", ".mask", function(){
        player.dispose()
        $(this).remove()
      })

    })
</script>
</body>
</html>